<template>
  <div>
    <!-- 红线切换按钮 -->
    <transition name="toggle-line">
      <div v-if="!isNavVisible" class="toggle-line" @click.stop="toggleNav"></div>
    </transition>

    <!-- 导航栏 -->
    <nav class="navbar" :style="{ height: isNavVisible ? '60px' : '0' }">
      <div class="logo">IHChina_SX</div>

      <ul class="nav-links">
        <li><router-link to="/home">非遗首页</router-link></li>
        <li><router-link to="/home/InheritorListView">非遗传承人</router-link></li>
        <li><router-link to="/home/learning">地区非遗</router-link></li>
        <li><router-link to="/home/DeepDive">深入了解</router-link></li>
        <li><router-link to="/home/policy">非遗政策</router-link></li>

        <!-- 只有非用户（角色为 1、2、3）可看到 -->
        <li v-if="showUploadTech"><router-link to="/home/UploadTech">非遗传承</router-link></li>

        <!-- 只有管理员及以上（角色为 1、2）可看到 -->
        <li v-if="showTechReview"><router-link to="/home/TechReview">项目管理</router-link></li>

        <li><a @click="handleLogout">退出登录</a></li>
      </ul>

      <div class="toggle-icon" @click.stop="toggleNav">
        <i class="fas fa-bars">{{ roleName }}</i>
      </div>
    </nav>
  </div>
</template>
<script>
export default {
  name: 'Navbar',
  data() {
    return {
      isNavVisible: true,
    };
  },
  computed: {
    roleName() {
      switch(this.userRole) {
        case 1: return '超级管理员';
        case 2: return '管理员';
        case 3: return '传承人';
        case 4: return '普通用户';
        default: return '未知身份';
      }
    },
    userRole() {
      const role = Number(localStorage.getItem('userRole'));
      return isNaN(role) ? 4 : role; // 默认为普通用户
    },
    showUploadTech() {
      return this.userRole === 1 || this.userRole === 3; // 只有超级管理员和传承人
    },
    showTechReview() {
      return this.userRole === 1 || this.userRole === 2; // 超管/管理员显示
    }
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('token');
      localStorage.removeItem('userRole');
      this.$router.push('/');
    },
    toggleNav() {
      this.isNavVisible = !this.isNavVisible;
      this.$emit('nav-toggle', this.isNavVisible);
    },
  },
};
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: height 0.3s ease; /* 高度过渡效果 */
  overflow: hidden;
  padding: 0 20px;
  box-sizing: border-box;
  border: none;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-left: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  transition: color 0.3s ease;
  cursor: pointer;
}

.nav-links a:hover {
  color: #007bff;
}

.toggle-icon {
  cursor: pointer;
  font-size: 1.5rem;
}

.toggle-icon i {
  color: #333;
  transition: color 0.3s ease;
}

.toggle-icon i:hover {
  color: #007bff;
}

/* 蓝线切换按钮的过渡效果 */
.toggle-line-enter-active,
.toggle-line-leave-active {
  transition: opacity 0.3s ease;
}

.toggle-line-enter-from,
.toggle-line-leave-to {
  opacity: 0;
}

.toggle-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0080ff;
  cursor: pointer;
  z-index: 1001;
}
</style>
